import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Row, Col } from 'antd';
import { Form, Icon, Input, Button } from 'antd';
import HTTP from './common/http.js';
import 'antd/dist/antd.css';
import './login.css';
const FormItem = Form.Item;

function hasErrors(fieldsError) {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class GCLogin extends Component {

    constructor(props) {
        super(props);
        this.handleLogin = this.handleLogin.bind(this);
    }

    componentDidMount() {
        this.props.form.validateFields();
    }

    handleLogin(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                HTTP.post('/userMgr/login', {"userName":"cong", "passwd":"gong"}, result => {
                    window.location.href="/static/index.html";
                }, error =>{

                });
                console.log("values:" + values);
            } else {
                console.log("error");
            }
        });
    }

    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        const userNameError = isFieldTouched('userName') && getFieldError('userName');
        const passwordError = isFieldTouched('passwd') && getFieldError('passwd');
        return (
            <div className="backgroud">
                <Row className="header">
                </Row>
                <Row className="debugRow cotent" type="flex" align="center">
                    <Col style={{ backgroundColor: 'pink', position: 'relative' }} span={10}>
                        <div id="logoDiv">
                            请添加logo
                        </div>
                    </Col>
                    <Col style={{ backgroundColor: 'pink', position: 'relative' }} offset={1} span={8} >
                        <div id="loginDiv">
                            <Form onSubmit={this.handleLogin}>
                                <FormItem validateStatus={userNameError ? 'error' : ''} help={userNameError || ''}>
                                    {
                                        getFieldDecorator('userName', {
                                            rules: [{ required: true, message: '请输入用户名..' }],
                                        })(
                                            <Input prefix={<Icon type='user' />} placeholder="用户名" />
                                            )
                                    }
                                </FormItem>
                                <FormItem validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
                                    {
                                        getFieldDecorator('password', {
                                            rules: [{ required: true, message: '请输入密码...' }]
                                        })(
                                            <Input prefix={<Icon type='lock' />} type='password' placeholder='密码' />
                                            )
                                    }
                                </FormItem>
                                <FormItem>
                                    <Button className='loginButton' type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>Log in</Button>
                                </FormItem>
                            </Form>
                        </div>
                    </Col>
                </Row>
                <Row className="footer" type="flex" justify="center">
                    <Col style={{ backgroundColor: 'pink', position: 'relative' }} span={8}>
                        <div id="connectDiv">
                            <span>ZYDX</span>
                            <address>BeiJing.China www.kepus.com</address>
                        </div>
                    </Col>
                </Row>
            </div>

        );
    }
}
GCLogin = Form.create()(GCLogin);
ReactDOM.render(<GCLogin />, document.body);